import HomePage_HeaderOperationComponent from "../../component/headerOperation"
import { ReactComponent as FullMainTransformer } from '../../../../assets/svg/fullMainTransformer.svg'
import { ReactComponent as MultiMainTransformer } from '../../../../assets/svg/multiMainTransformer.svg'
import { ReactComponent as SingleMainTransformer } from '../../../../assets/svg/singleMainTransformer.svg'
import { ReactComponent as AllLine } from '../../../../assets/svg/allLine.svg'
import { ReactComponent as MultipleLines } from '../../../../assets/svg/multipleLines.svg'
import { ReactComponent as SingleLine } from '../../../../assets/svg/singleLine.svg'
import { Outlet } from "react-router-dom"
import { $echartsData, $headerOperationBtnData, $headerOperationConditionData } from "../../../../common/utils"

// 主页-实时动态页面
const HomePage_RealRimeDynamicsPage: React.FC = () => {

  const tabList = [
    { 
      svg: FullMainTransformer,
      title: "全主变",
      router: "fullMainTransformer",
      operationData: {
        btnList: [
          $headerOperationBtnData("查询","search", {}, true)
        ],
        conditionList: [
          $headerOperationConditionData["monitoringDevice"](),
          $headerOperationConditionData["singleBtn"]("监测主变","主变"),
        ],
        singleBtnKey: "id",
        singleBtnValueKey: "id",
        selectMonitorOperation:"监测",
        initParamsData: {
          monitorDevice:null,
          id: "",
        }
      },

    },
    {
      svg: MultiMainTransformer,
      title: "多主变",
      router: "multiMainTransformer",
      operationData: {
        isLayoutSetting: true,
        btnList: [
          $headerOperationBtnData("历史数据","history", {}, true)
        ],
        conditionList: [
          $headerOperationConditionData["dateTimePickerRange"]("统计时间",["startTime","endTime"]),
        ]
      },
    },
    {
      svg: SingleMainTransformer,
      title: "单主变",
      router: "singleMainTransformer",
      isBorderRight: true,
      operationData: {
        isLayoutSetting: true,
        btnList: [
          $headerOperationBtnData("历史数据","history", {}, true)
        ],
        conditionList: [
          $headerOperationConditionData["dateTimePickerRange"]("统计时间",["startTime","endTime"]),
        ]
      },
    },
    {
      svg: AllLine,
      title: "全线路",
      router: "fullLine",
      operationData: {
        btnList: [
          $headerOperationBtnData("查询","search", {}, true)
        ],
        conditionList: [
          $headerOperationConditionData["monitoringDevice"](),
          $headerOperationConditionData["singleBtn"]("监测线路","线路"),
        ],
        singleBtnKey: "id",
        singleBtnValueKey: "id",
        selectMonitorOperation:"监测",
        initParamsData: {
          monitorDevice:null,
          id: "",
        }
      },
    },
    {
      svg: MultipleLines,
      title: "多线路",
      router: "multipleLine",
      operationData: {
        isLayoutSetting: true,
        btnList: [
          $headerOperationBtnData("历史数据","history", {}, true)
        ],
        conditionList: [
          $headerOperationConditionData["dateTimePickerRange"]("统计时间",["startTime","endTime"]),
        ]
      },
    },
    {
      svg: SingleLine,
      title: "单线路",
      router: "singleLine",
      operationData: {
        isLayoutSetting: true,
        btnList: [
          $headerOperationBtnData("历史数据","history", {}, true)
        ],
        conditionList: [
          $headerOperationConditionData["dateTimePickerRange"]("统计时间",["startTime","endTime"]),
        ]
      },
    },
  ]


  return (
    <div className="homePage-page">
      <HomePage_HeaderOperationComponent tabList={tabList} />
      <main className="homePage-page__main">
        <Outlet />
      </main>
    </div>
  )
}

export default HomePage_RealRimeDynamicsPage